<template>
  <div>
    <StockInfo v-bind="stockinfo" />
    <atom-tabs type="card" style="margin-top: 16px" v-model="active">
      <atom-tab title="涨停分析"> <LimitAnalysis @updateStockInfo="updateStockInfo" /> </atom-tab>
      <atom-tab title="涨停基因"> <LimitGene :geneData="limitData?.geneData" :score="limitData.score" /> </atom-tab>
      <atom-tab title="近一年表现"><YearPerformance :historyData="limitData?.historyReturn" /></atom-tab>
    </atom-tabs>
  </div>
</template>

<script>
import StockInfo from '@/components/common/StockInfo.vue';
import LimitAnalysis from '@/components/limitDetail/limitAnalysis/Index.vue';
import LimitGene from '@/components/limitDetail/LimitGene.vue';
import YearPerformance from '@/components/limitDetail/YearPerformance.vue';
import { reqZtjy } from '@/apis/index';
import { errorReport } from '@/scripts/tools.js';

export default {
  components: {
    StockInfo,
    LimitAnalysis,
    LimitGene,
    YearPerformance,
  },
  data() {
    return {
      active: 0,
      stockinfo: {
        stockcode: window.getParam('stockcode'),
        market: window.getParam('marketid'),
        stockname: decodeURIComponent(window.getParam('name')),
        price: '',
        increase: '',
      },
      limitData: {},
    };
  },
  methods: {
    updateStockInfo(price, increase) {
      this.stockinfo.price = price;
      this.stockinfo.increase = increase;
    },
    /**
     * 获取个股涨停基因和近一年表现
     */
    getLimitData() {
      const params = {
        op: 'getStockGene',
        stockCode: this.stockinfo.stockcode,
      };
      reqZtjy(params)
        .then(res => {
          if (res?.data) {
            this.limitData = res.data;
          }
        })
        .catch(err => {
          errorReport({
            name: `获取个股涨停基因和近一年表现接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
  },
  created() {
    const activeTabName = window.getParam('activeTabName');
    const activeOptions = {
      ztfx: 0,
      ztjy: 1,
      jynbx: 2,
    };
    this.active = activeOptions[activeTabName || 'ztfx'];
  },
  mounted() {
    this.getLimitData();
  },
};
</script>
<style lang="less" scoped>
/deep/.atom-tabs--card {
  background-color: var(--bg-color-2);
  padding: 28px 0;
}
/deep/.atom-tabs__content {
  background-color: #f5f5f5;
}
</style>
